<!-- 签单单位组件 -->
<template>
  <nut-popup class="signBox" position="bottom" closeable round :style="{ height: '75%' }" @click-close-icon="sendSignUnitMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="签单单位"></nut-cell>
    <nut-searchbar v-model="searchValue" placeholder="请输入客户简称/客户名称">
      <template #rightout>
        <IconFont @click="search" name="search2"></IconFont>
      </template>
    </nut-searchbar>
    <nut-radio-group v-model="radioVal" class="radioBox">
      <view v-for="costItem in signUnitList" class="radio" @click="handleRadioClick(costItem)">
        <nut-radio :label="costItem.contractedNo" icon-size="12">
          <view>
            <view class="flex_ld">
              <span class="font1">{{ costItem.simpleName }}</span>
              <span class="font2" :class="getClass(costItem.type)">{{ getText(costItem.type) }}</span>
            </view>
            <view class="font3">客户名称：{{ costItem.customerName }}</view>
            <view class="font4" :class="getClass(costItem.type)">
              <image class="icon" v-if="costItem.type == 1" src="../../assets/images/iconOrange.png" />
              <image class="icon" v-if="costItem.type == 2" src="../../assets/images/iconRed.png" />
              <span v-if="costItem.type !== 0">{{ costItem.signNotice }}</span>
            </view>
          </view>
        </nut-radio>
      </view>
    </nut-radio-group>
    <!-- 回单类型弹窗  -->
    <nut-action-sheet v-model:visible="visible" cancel-txt="取消" description="回单要求" :menu-items="customerdemandList" @choose="choose"> </nut-action-sheet>
    <nut-button class="btn" block type="primary" color="#0966ff" @click="sendSignUnitMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { onMounted, defineComponent, getCurrentInstance, reactive, ref } from 'vue'
import { Search2 } from '@nutui/icons-vue-taro'
import { getSignUnit } from '@/@api/wait' // 待确认接口
import { signUnitParams } from './type.ts'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'

const props = defineProps<{
  showRound: boolean
}>()

const emit = defineEmits(['sendSignUnitMsg'])

onMounted(() => {
  initGetSignUnit() // 获取签单单位信息
})

const searchValue = ref('') // 搜索关键词
const radioVal = ref('') // 选中的label
const customerName = ref('') // 签单单位名称
const signUnitList = ref<signUnitParams[]>([])
const emptyShow = ref(false) // 无数据初始化

const customerdemandList = ref() // 签单单位对应的回单类型
const visible = ref(false)
const val = ref('')

const choose = (item) => {
  console.log(item, '选中的回单要求')
  // val.value = item.name
  val.value = item
}

const handleRadioClick = (item: any) => {
  console.log(item, 'sss')
  customerName.value = item.customerName
  // 显示回单类型弹窗
  customerdemandList.value = item.customerdemandList.map((obj) => {
    return { ...obj, name: obj.require }
  })
  visible.value = true
}

// 查询签单列表
async function initGetSignUnit() {
  let params = {
    branchCompanyNo: Taro.getStorageSync('btStaff').branchCompanyNo,
    keyWord: searchValue.value
  }
  const res = await getSignUnit(params)
  // console.log(res, '签单列表/selfmachine-system/order/getSignUnit')
  if (res.data.code == 200) {
    signUnitList.value = res.data.rows
  }
}

// 返回样式
const getClass = (type) => {
  switch (Number(type)) {
    case 0:
      return 'bgBlue'
    case 1:
      return 'bgOrange'
    case 2:
      return 'bgRed'
    default:
      return ''
  }
}

// 返回文本
const getText = (type) => {
  switch (Number(type)) {
    case 0:
      return '签单'
    case 1:
      return '风险'
    case 2:
      return '禁止开单'
    default:
      return ''
  }
}

const search = () => {
  signUnitList.value = [] // 置空
  initGetSignUnit()
}

const sendSignUnitMsg = (flag) => {
  console.log(val.value,'传递数据啊啊啊啊啊啊啊啊啊啊啊啊啊啊')
  if (flag) {
    const signUnit = {
      contractedNo: radioVal.value || '',
      customerName: customerName.value || '',
      billInfo:val.value, // 回单要求 require name ...
    }
    emit('sendSignUnitMsg', signUnit) // 关闭弹窗传递数据
  } else {
    emit('sendSignUnitMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.signBox {
  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .wareItem {
    width: 550rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f0f0f0;
    color: #666;
    font-size: 22rpx;
    margin: 0 auto;

    .title {
      color: #252525;
      font-size: 28rpx;
      margin-bottom: 4rpx;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .content {
    }
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn {
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
  }

  .radioBox {
    width: 702rpx;
    height: 716rpx;
    margin: 0 auto;
    padding: 20rpx;
    padding-bottom: 128rpx;
    overflow-y: scroll;

    .radio {
      width: 702rpx;
      padding: 12rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
      box-sizing: border-box;
    }

    .font1 {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }

    .font2 {
      font-size: 22rpx;
      padding: 4rpx;
      background: rgba(255, 143, 31, 0.16);
      border-radius: 10rpx;
    }

    .font3 {
      color: #666666;
      font-size: 24rpx;
      margin: 8rpx auto;
    }

    .font4 {
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      background: rgba(255, 143, 31, 0.16);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-radius: 10rpx;

      .img {
        vertical-align: middle;
        margin-right: 4rpx;
      }
    }

    .bgBlue {
      color: #0966ff;
      background: #d7e6ff;
    }

    .bgOrange {
      color: #ff8f1f;
      background: #ffeddb;
    }

    .bgRed {
      color: #fa5151;
      background: #fee3e3;
    }

    .icon {
      width: 28rpx;
      height: 28rpx;
    }
  }
}
</style>
